<template>
  <div class="">
    <!-- 风险源 -->
    <div class="source-class">
      <label>查看方式：</label>
      <el-radio-group v-model="group" @input="initPage">
        <el-radio-button :label="item.key" v-for="item in groups" :key="item.key">{{ item.name }}</el-radio-button>
      </el-radio-group>
    </div>
    <div class="sec-main">
      <sec-ext-table
        ref="secTableRef"
        :tableData="tableData"
        :tableCol="tableCol"
        :filterCol="filterCol"
        @filter-confirm="filterConfirm"
        @search-change="searchChange"
      >
        <template v-slot:owner="{ data }">
          <dc-user :name="data.row.owner"></dc-user>
        </template>
        <template v-slot:lastGovernor="{ data }">
          <dc-user :name="data.row.lastGovernor"></dc-user>
        </template>
      </sec-ext-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        background
        :layout="layout"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { configConditionApi, assetTagsApi, assetListApi } from "api/api";
import { paginationMixin } from "@/mixins/pagination";
export default {
  name: "propertyCenter",
  props: {},
  mixins: [paginationMixin],
  components: {},
  data() {
    return {
      group: "", //查看方式选中的value值
      groups: [], //查看方式数据
      tableData: [],
      tableCol: [],
      filterCol: [],
      operation: {
        type: "operation",
        label: "操作",
        children: [
          {
            label: "详情",
            click: ({ row }) => {
              console.log(row);
              this.utils.$router(
                {
                  path: `/asset/${this.type}/${this.source}/${this.group}`,
                  query: { uniqId: row.uniqId },
                },
                "_blank",
              );
            },
          },
        ],
      },
    };
  },
  computed: {
    type() {
      let { params } = this.$route;
      return params.type;
    },
    source() {
      let { params } = this.$route;
      return params.source;
    },
  },
  async created() {
    await this.getAssetTags(); //查看方式
    this.initPage();
  },
  mounted() {},
  methods: {
    async getAssetTags() {
      await assetTagsApi({ source: this.source }).then((res) => {
        this.group = res.data[0]?.key;
        this.groups = res.data || [];
      });
    },
    searchChange(val) {
      this.searchVal = val;
      this.page = 1;
      this.initTableData();
    },
    filterConfirm(data) {
      this.filter = data;
      this.page = 1;
      this.initTableData();
    },

    initPage() {
      this.reset();
      this.setStateInfo(); //在state存一份type，source
      this.initConfigCondition(); //获取表头数据
      this.initTableData(); //获取表格数据
    },
    setStateInfo() {
      this.$store.commit("setType", this.type);
      this.$store.commit("setSource", this.source);
      this.$store.commit("setGroup", this.group);
    },
    initConfigCondition() {
      configConditionApi({ type: this.source, source: this.group }).then((res) => {
        let data = res.data;
        let { tableCol, filterCol } = new this.ConfigCondition({
          data: data,
          type: {
            slot: ["owner"],
            formatters: [
              {
                prop: "hasPii",
                width: 120,
                formatter: (row) => {
                  return this.utils.getDictLabel("hasPii", row.hasPii);
                },
              },
            ],
          },
        });
        this.tableCol = tableCol;
        this.tableCol.push(this.operation);
        this.filterCol = filterCol;
      });
    },
    initTableData() {
      let loading = this.openLoading();
      assetListApi({
        type: this.type,
        source: this.source,
        group: this.group,
        blurs: this.searchVal,
        filter: this.filter,
        pageSize: this.pageSize,
        pageNum: this.page,
      }).then((res) => {
        loading.close();
        console.log(res);
        let data = res.data;
        this.tableData = data;
        this.totalSize = res.count;
      });
    },
    reset() {
      this.searchVal = "";
      this.filter = [];
      this.$refs.secTableRef.reset(); //初始化选择框和筛选项以及字段设置
    },
    // 页码变更
    handleCurrentChange(val) {
      this.page = val;
      this.initTableData();
    },
    // 条数变更
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTableData();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
